<template>
	<view>
		<block v-for="(item, index) in userList" :key="index">
			<view class="member-item">
				<view class="user d-flex align-items-center justify-content-between">
					<view class="d-flex align-items-center">
						<cos-avatar :src="item.user.avatar" :showSex="item.user.gender?true:false" :sexIcon="item.user.gender_label"></cos-avatar>
						<view class="info">
							<view class="name mb-10">
								<text class="font-size-lg font-weight-bold mr-10">{{ item.user.nickname }}</text>
							</view>
							<view class="sub-text">
								<text class="text-color-assist">{{ item.real_name }}({{item.identity_label}})</text>
							</view>
						</view>
					</view>
					<view v-if="item.status===0">
						<u-button @click.stop="pass(index, item.id)" class="btn-gz mr-20" type="success" size="mini">通过</u-button>
						<u-button @click.stop="refused(index, item.id)" class="btn-gz" type="error" size="mini">驳回</u-button>
					</view>
				</view>
				<cos-cert-image :albumPhotos="item.album_photos" :bustPhotos="item.bust_photos" ></cos-cert-image>
				<!-- 底部 -->
				<view class="p-footer d-flex text-color-assist font-size-base justify-content-between">
					<view>{{item.created_at}}</view>
					<view v-if="item.status===-1" class="text-color-danger">驳回原因：{{item.reason}}</view>
					<view v-else-if="item.status===0" class="text-color-warning">等待审核中</view>
					<view v-else-if="item.status===1" class="text-color-blue">已通过审核</view>
				</view>
			</view>
		</block>
		<!-- 加载状态 -->
		<block v-if="loadStatus != 'none'">
			<block v-if="list.length === 0 && loadStatus == 'nomore'"><u-empty margin-top="100" text="暂无用户" mode="favor"></u-empty></block>
			<block v-else><u-loadmore margin-bottom="50" margin-top="50" :status="loadStatus" /></block>
		</block>
		
		<!-- 拒绝弹窗 -->
		<u-action-sheet :list="refusedList" v-model="refusedAction" @click="refusedActionCon"></u-action-sheet>
	</view>
</template>

<script>
import cosCertImage from '@/components/cos-media/cos-cert-image-style.vue';
export default {
	components: {
		cosCertImage
	},
	props: {
		list: Array,
		loadStatus: String
	},
	data() {
		return {
			userList: [],
			refusedAction:false,
			refusedList:[{
					text: '身份作品模糊不清，需露脸',
					color: '',
					key:1
				},{
					text: '半身照不清楚',
					color: '',
					key:2
				},{
					text: '身份作品与半身照非同一人',
					color: '',
					key:3
				}
			],
			refusedIndex:'',
			refusedId:''
		};
	},
	watch: {
		list() {
			this.userList = this.list;
		}
	},
	methods: {
		pass(index, id) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确认审核通过？',
				confirmText:'通过',
				success (res) {
					if (res.confirm) {
						uni.showLoading({
							mask: true,
							title: '通过中...'
						});
						that.$H.post('manager/certPass', {id: id}).then(res => {
							that.userList.splice(index, 1);
							uni.hideLoading();
						});
					}
				}
			})
		},
		refused(index, id) {
			this.refusedIndex  = index;
			this.refusedId     = id;
			this.refusedAction = true;
		},
		refusedActionCon(index) {
			uni.showLoading({
				mask: true,
				title: '驳回中...'
			});
			this.$H.post('manager/certReject', {id: this.refusedId, reason:this.refusedList[index].text}).then(res => {
				this.userList.splice(this.refusedIndex, 1);
				uni.hideLoading();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.member-item {
	padding: 20rpx;
	border-bottom: 2rpx solid #f5f5f5;
	background-color: #ffffff;
	border-radius: 10rpx;
	&:last-child{
		border-bottom: 0;
	}
	
	.post-content {
		margin-top: 20rpx;
	
		.img-style-2 {
			display: flex;
			flex-wrap: nowrap;
			
			image {
				margin: 5rpx;
				border-radius: 10rpx;
				width: 48.9%;
				height: 294rpx;
			}
		}
	}
}

.member-item .icon-nv {
	color: #ff4d94;
}

.member-item .icon-nan {
	color: #0091ff;
}

.member-item .avatar {
	margin-right: 20rpx;
}

.member-item .user .name {
	margin-right: 20rpx;
}

.member-item .user .iconfont {
	font-size: 30rpx;
}

.member-item .btn-gz {
	margin-left: auto;
}
</style>
